<template>
  <div class="ant-spin-nested">
    <div class="ant-spin-nested-loading">
      <left-nav></left-nav>
      <div class="spin-right-bottom">
        <div
          style="
            font-weight: 550;
            font-size: 25px;
            color: #333;
            line-height: 40px;
            text-align: left;
          "
        >
          导航报表
        </div>
        <div class="ant-spin-right-bottom-box">
          <div class="vue-select">
            <div class="twoline-select">
              <div class="oneline-select">
                <span class="demonstration">日期选择 :</span>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  style="width: 300px"
                  :picker-options="pickerOptions"
                  class="select-date"
                >
                </el-date-picker>
                <span class="demonstration ml12">时间选择 :</span>
                <el-time-select
                  placeholder="起始时间"
                  v-model="startTime"
                  value-format="HH"
                  
                  size="medium"
                  :picker-options="{
                    start: '00:00',
                    step: '1:00',
                    end: '23:00',
                  }"
                >
                </el-time-select>
                至
                <el-time-select
                  placeholder="结束时间"
                  v-model="endTime"
                      value-format="HH"
                  :picker-options="{
                    start: '01:00',
                    step: '1:00',
                    end: '24:00',
                    minTime: startTime,
                  }"
                >
                </el-time-select>
                <!-- <el-date-picker
                  v-model="value2"
                  type="timerange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd-HH"
                  style="width: 300px"
                  :picker-options="pickerOptions"
                  class="select-date"
                >
                </el-date-picker> -->
              </div>
              <div class="vue-button">
                <el-button type="primary" @click="initInfo(), listInfo(true)">
                  查 询
                </el-button>
              </div>
            </div>
          </div>
          <div class="ant-table-scroll">
            <div class="vue-table-head" ref="systemForm">
              <table class="ant-table-fixed">
                <colgroup>
                  <col style="width: 20px; min-width: 100px" />
                  <col style="width: 150px; min-width: 150px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 120px; min-width: 120px" />
                  <col style="width: 120px; min-width: 120px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 20px; min-width: 20px" />
                </colgroup>
                <tr class="infoCalld-tr">
                  <th></th>
                  <th>时间</th>
                  <th>应答量</th>
                  <th>转人工量</th>
                  <th>主动转人工量</th>
                  <th>被动转人工量</th>
                  <th>业务转人工量</th>
                  <th>8号键转人工量</th>
                  <th>首解量</th>
                  <th>业务首解量</th>
                  <th>无声通话量</th>
                  <th>有效通话量</th>
                  <th>重复来电用户量</th>
                  <th>平均通话时长(s)</th>
                  <th>平均交互次数</th>
                  <th>导航自助分流率</th>
                </tr>
                <tr class="infoCalld-tr">
                  <th></th>
                  <th>总量</th>
                  <th>{{ reportAll.jxl }}</th>
                  <th>{{ reportAll.zrg }}</th>
                  <th>{{ reportAll.zdzrg }}</th>
                  <th>{{ reportAll.bdzrg }}</th>
                  <th>{{ reportAll.ywzrg }}</th>
                  <th>{{ reportAll.ehjzrgl }}</th>
                  <th>{{ reportAll.sj }}</th>
                  <th>{{ reportAll.ywsj }}</th>
                  <th>{{ reportAll.wsth }}</th>
                  <th>{{ reportAll.yxth }}</th>
                  <th>{{ reportAll.cfld }}</th>
                  <th>{{ reportAll.pjthsj }}</th>
                  <th>{{ reportAll.pjjhcs }}</th>
                  <th>{{ reportAll.dhzzfll }}</th>
                </tr>
              </table>
            </div>

            <div
              class="vue-table-scroll"
              ref="externalForm"
              @scroll="exterHandleScroll()"
              v-loading="loadFlag"
            >
              <table class="ant-table-fixed">
                <colgroup>
                  <col style="width: 20px; min-width: 100px" />
                  <col style="width: 150px; min-width: 150px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 120px; min-width: 120px" />
                  <col style="width: 120px; min-width: 120px" />
                  <col style="width: 100px; min-width: 100px" />
                  <col style="width: 100px; min-width: 100px" />
                    <col style="width: 20px; min-width: 20px" />
                </colgroup>
                <tbody v-for="(p, index) in infoCalld" :key="index">
                  <tr class="infoCalld-tr">
                    <th></th>
                    <th>{{ p.jtDate }}</th>
                    <th>{{ p.jxl > -1 ? p.jxl : "--" }}</th>
                    <th>{{ p.zrg }}</th>
                    <th>{{ p.zdzrg }}</th>
                    <th>{{ p.bdzrg }}</th>
                    <th>{{ p.ywzrg }}</th>
                    <th>{{ p.ehjzrgl > -1 ? p.ehjzrgl : "--" }}</th>
                    <th>{{ p.sj }}</th>
                    <th>{{ p.ywsj }}</th>
                    <th>{{ p.wsth }}</th>
                    <th>{{ p.yxth }}</th>
                    <th>{{ p.cfld }}</th>
                    <th>{{ p.pjthsj }}</th>
                    <th>{{ p.pjjhcs }}</th>
                    <th>{{ p.dhzzfll }}</th>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="vue-right-page">
            <div class="vue-right-page-count">数据总量:{{ page.allItems }}</div>
            <ul class="vue-rigth-page-pages">
              <li
                class="prev"
                v-if="page.prevBtn == true"
                @click="_gotoPage('prev')"
              >
                <a href="javascript:;">&lt;</a>
              </li>
              <li class="prevDisabled" v-if="page.prevBtn == false">
                <a href="javascript:;">&lt;</a>
              </li>
              <li
                :class="{ active: page.currentPage == index }"
                v-for="index in page.p1"
                @click="_gotoPage(index)"
                :key="index"
              >
                <a href="javascript:;">{{ index }}</a>
              </li>
              <li class="more" v-if="page.isShowMore1">...</li>
              <li
                :class="{ active: page.currentPage == index }"
                v-for="index in page.p2"
                @click="_gotoPage(index)"
                :key="index"
              >
                <a href="javascript:;">{{ index }}</a>
              </li>
              <li class="more" v-if="page.isShowMore2">...</li>
              <li
                :class="{ active: page.currentPage == index }"
                v-for="index in page.p3"
                @click="_gotoPage(index)"
                :key="index"
              >
                <a href="javascript:;">{{ index }}</a>
              </li>
              <li
                class="next"
                v-if="page.nextBtn == true"
                @click="_gotoPage('next')"
              >
                <a href="javascript:;">&gt;</a>
              </li>
              <li class="nextDisabled" v-if="page.nextBtn == false">
                <a href="javascript:;">&gt;</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import leftNav from "../leftNav.vue";
import { GetDataInfo, GetDataCount } from "../../api/api.js";
export default {
  name: "GetListInfo",
  data() {
    return {
      startTime:"",
      endTime:'',
      infoCalld: [],
      infoSize: 0,
      flag: false,
      loadFlag: false,
      value1: ["", ""],
      page: {
        currentPage: 1,
        allPages: 0,
        allItems: 0,
        pagesize: 10,
        showBtn: 5,
        nextBtn: true,
        prevBtn: false,
        isShowMore1: false,
        isShowMore2: false,
        p1: [],
        p2: [],
        p3: [],
      },
      callId: "",
      reportAll: {},
      selectDate: "",
      pickerOptions: {
        //限制选择区间为一个月
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          let currentTime = new Date();
          currentTime.setTime(currentTime.getTime());
          let month = currentTime.getMonth() + 1;
          let date = currentTime.getDate();
          let fullMonth = month < 10 ? "0" + month : month;
          let fullDay = date < 10 ? "0" + date : date;
          let baseTime = new Date(
            currentTime.getFullYear() + "-" + fullMonth + "-" + fullDay
          );

          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              time.getTime() > baseTime.getTime()
            );
          } else {
            return time.getTime() > baseTime.getTime();
          }
        },
      },
    };
  },
  watch: {
    "page.currentpage": function (val) {
      var _this = this;
      _this._getList();
    },
  },
  create() {},
  components: {
    leftNav,
  },
  computed: {
    pagination: function () {
      var _this = this;
      var i = _this.page.showBtn - 2;
      if (_this.page.currentPage == _this.page.allPages) {
        _this.page.nextBtn = false;
      }
      var p1 = [],
        p2 = [],
        p3 = [];
      if (_this.page.allPages < _this.page.showBtn) {
        _this.page.isShowMore1 = false;
        _this.page.isShowMore2 = false;
        i = _this.page.allPages;
        while (i) {
          p1.unshift(i--);
        }
      } else if (
        _this.page.allPages > _this.page.showBtn &&
        _this.page.allPages < _this.page.showBtn + 1
      ) {
        _this.page.isShowMore1 = false;
        _this.page.isShowMore2 = true;
        if (_this.page.currentPage < 3) {
          p1 = [1, 2, 3];
          p3.push(_this.page.allPages);
        } else {
          p1 = [1];
          i = _this.page.showBtn - 2;
          while (i--) {
            p3.unshift(_this.page.allPages--);
          }
        }
      } else {
        if (_this.page.currentPage < 3) {
          p1 = [1, 2, 3];
          p3.push(_this.page.allPages);
          _this.page.isShowMore1 = false;
          _this.page.isShowMore2 = true;
        } else if (_this.page.currentPage > _this.page.allPages - 2) {
          _this.page.isShowMore1 = true;
          _this.page.isShowMore2 = false;
          p1 = [1];
          i = 3;
          var allPages = _this.page.allPages;
          while (i--) {
            p3.unshift(allPages--);
          }
        } else {
          _this.page.isShowMore1 = true;
          _this.page.isShowMore2 = true;
          if (_this.page.currentPage == 3) {
            _this.page.isShowMore1 = false;
          } else if (_this.page.currentPage == _this.page.allPages - 1) {
            _this.page.isShowMore2 = false;
          }
          p1 = [1];
          p3.push(_this.page.allPages);
          var middle = parseInt((_this.page.showBtn - 2) / 2);
          var start = _this.page.currentPage - middle;
          i = _this.page.showBtn - 2;
          while (i--) {
            p2.push(start++);
          }
        }
      }
      _this.page.p1 = p1;
      _this.page.p2 = p2;
      _this.page.p3 = p3;
    },
  },

  mounted() {
    this.timeDefault();
    this.initInfo();
    this.listInfo(true);
  },

  methods: {
    timeDefault() {
      var myDate = new Date();
      var year = myDate.getFullYear();
      var month = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
      var day = myDate.getDate(); //获取当前日(1-31)
      month = month;
      var month2 = month + 1;
      if (month.length == 1) {
        month = "0" + month;
      }
      if (month2.length == 1) {
        month2 = "0" + month2;
      }
      if (day.length == 1) {
        day = "0" + day;
      }
      this.$set(this.value1, 0, year + "-" + month + "-" + day );
      this.$set(this.value1, 1, year + "-" + month2 + "-" + day );
    },
    initInfo() {
      this.page.currentPage = 1; //当前页
      this.page.allPages = 0; //页数
      this.page.allItems = 0; //数据总量
      this.page.pagesize = 10;
      this.page.showBtn = 5;
      this.page.nextBtn = true;
      this.page.prevBtn = false;
      this.page.isShowMore1 = false;
      this.page.isShowMore2 = false;
      this.page.p1 = [];
      this.page.p2 = [];
      this.page.p3 = [];
      this.infoCalld = [];
    },
    listInfo(flag) {
      this.loadFlag = false;
      var param = {};
      if (
        this.value1 != null &&
        this.value1[0] != "" &&
        this.value1[0] != null
      ) {
        param.startDate = this.value1[0];
        param.endDate = this.value1[1];
        param.currentPage = (this.page.currentPage - 1) * 10;
        if(!this.startTime){ this.startTime="00:00"}
        // else if(this.startTime==="0:00") {   console.log(1);}
        // else{
        //   const time= this.startTime.split(':')[0]
        //   const isFirst0=time.split("")[0].indexOf('0')
        //   if(isFirst0>-1){
        //     this.startTime= this.startTime.slice(1
            
            
        //     )
        //   }
        //   console.log(isFirst0);
        // }

         if(!this.endTime) this.endTime="24:00"
        param.startTime=this.startTime
        param.endTime=this.endTime
      }

      GetDataInfo(param)
        .then((res) => {
          this.infoCalld = res.data;
          this.reportAll = res.allData || "";
          this.page.allItems = res.pageSize;
          this.page.allPages = Math.ceil(
            this.page.allItems / this.page.pagesize
          );
          if (flag) {
            var n = 10;
            if (this.page.allPages > 5) {
              this.page.p1 = [1, 2, 3];
              this.page.p2 = [this.page.allPages];
              this.page.isShowMore1 = true;
            } else if (this.page.allPages == 5) {
              this.page.p1 = [1, 2, 3, 4, 5];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 4) {
              this.page.p1 = [1, 2, 3, 4];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 3) {
              this.page.p1 = [1, 2, 3];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 2) {
              this.page.p1 = [1, 2];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 1) {
              this.page.p1 = [1];
              this.page.p2 = [];
              this.page.p3 = [];
              n = this.page.allItems;
            } else if (this.page.allPages == 0) {
              this.page.p1 = [];
              this.page.p2 = [];
              this.page.p3 = [];
              n = this.page.allItems;
            }
          }
          this.loadFlag = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleOver1: function (event) {
      event.currentTarget.className = "select-content-in-area-active1";
    },
    handleOver: function (event) {
      event.currentTarget.className = "select-content-in-area-active";
    },
    handleOut1: function (event) {
      event.currentTarget.className = "select-content-in-first";
    },
    handleOut: function (event) {
      event.currentTarget.className = "select-content-in-area";
    },
    //实现滚动条同步
    exterHandleScroll() {
      this.$refs.systemForm.scrollLeft = this.$refs.externalForm.scrollLeft;
    },
    _gotoPage: function (n) {
      var _this = this;
      if (n == _this.page.currentPage) {
        return;
      }
      if (n == 1) {
        _this.page.prevBtn = false;
      } else {
        _this.page.prevBtn = true;
      }
      if (n == _this.page.allPages) {
        _this.page.nextBtn = false;
      } else {
        _this.page.nextBtn = true;
      }
      if (typeof n == "number") {
        _this.page.currentPage = n;
      } else if (n == "next") {
        _this.page.currentPage++;
      } else if (n == "prev") {
        _this.page.currentPage--;
        if (_this.page.currentPage == 1) {
          _this.page.prevBtn = false;
        }
      }
      this.infoCalld = [];
      if (_this.page.currentPage == this.page.allPages) {
        this.listInfo(false);
      } else {
        this.listInfo(false);
      }

      if (_this.page.currentPage == _this.page.allPages) {
        _this.page.nextBtn = false;
      }
      _this.pagination;
    },
  },

  ready: function () {
    var _this = this;
    _this.pagination;
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  scoped>
.ant-spin-nested {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: auto;
}
.ant-spin-nested-loading {
  height: 100%;
  width: 100%;
  position: absolute;
}
.spin-right-bottom {
  position: absolute;
  top: 60px;
  left: 230px;
  right: 0px;
  bottom: 0px;
  color: #666;
  background: #f5f5f5;
  padding: 10px 20px 20px 20px;
}
.ant-spin-right-bottom-box {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  top: 50px;
  color: #666;
  background: #ffffff;
  padding: 20px;
  text-align: left;
}
.vue-select {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 20px;
  height: 50px;
}
.vue-select-oneline {
  height: 40px;
  line-height: 40px;
}
.oneline-select {
  float: left;
  margin-right: 40px;
}
.twoline-select {
  position: absolute;
  top: 10px;
  width: 100%;
  height: 40px;
}
.vue-select-callId-input {
  height: 38px;
  width: 250px;
}
.vue-select-region-input {
  height: 30px;
  width: 100px;
}
.vue-select-exitId-input {
  border: 1px solid #dcdcdc;
  height: 30px;
  width: 150px;
  text-align: center;
  border-radius: 5px;
  outline: none;
}
.vue-select-isws-input {
  border: 1px solid #dcdcdc;
  height: 30px;
  width: 100px;
  text-align: center;
  border-radius: 5px;
  outline: none;
}
.vue-button {
  display: inline-block;
  width: 80px;
  height: 40px;

  float: right;
}
.vue-button button {
  width: 100%;
  height: 40px;
  height-line: 40px;
}
.ant-table-scroll {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  height: 500px;
}

.vue-right-page {
  position: absolute;
  top: 525px;
  left: 20px;
  right: 20px;
  height: 50px;
}

.vue-table-head {
  width: 100%;
  position: absolute;
  overflow-x: auto;
  background: #f5f5f5;
}
.vue-table-head th {
  font-weight: 600;
  border-bottom: 2px solid #dcdcdc;
}
.vue-table-scroll {
  top: 94px;
  height: 338px;
  width: 100%;
  position: absolute;
  overflow: auto;
  background: #ffffff;
}
.ant-table-fixed {
  width: 1500px;
  border-radius: 3px;
  border-spacing: 0;
}
.infoCalld-tr {
  height: 47px;
}
th {
  border-bottom: 1px solid #f5f5f5;
}
/* 设置滚动条整体部分 */
.ant-spin-nested::-webkit-scrollbar {
  width: 8px;
}
/* 设置滚动条部分 */
.ant-spin-nested::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5 px rpba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.vue-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.vue-table-scroll::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
  background: #dddddd;
}
.vue-table-scroll::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #dddddd;
}

.vue-table-head::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.vue-table-head::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
}
.select-content-in::-webkit-scrollbar {
  width: 4px;
}
.select-content-in::-webkit-scrollbar-thumb {
  width: 4px;
  border-radius: 8px;
  background: #dddddd;
}
.select-content-in::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #dddddd;
}
.vue-right-page-count {
  float: left;
  line-height: 40px;
  font-size: 20px;
}
.vue-rigth-page-pages {
  float: right;
  height: 40px;
  line-height: 40px;
  padding: 0 60px;
  list-style-type: none;
}
.vue-rigth-page-pages li {
  float: left;
  height: 40px;
  border: 1px solid #e6ecef;
  border-radius: 8px;
  margin: 0 10px;
  padding: 0 20px;
  color: #263238;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
}
.vue-rigth-page-pages li a {
  text-decoration: none;
  color: #263238;
  font-size: 15px;
}
.vue-rigth-page-pages li.active {
  background-color: #03a9f4;
  border-color: #03a9f4;
}
.vue-rigth-page-pages li.active a {
  color: #fff;
}
.vue-rigth-page-pages li.more {
  background-color: #fff;
}
ul.vue-rigth-page-pages li.prev,
ul.vue-rigth-page-pages li.next {
  width: 7px;
}
.vue-rigth-page-pages li.prevDisabled,
.vue-rigth-page-pages li.nextDisabled {
  width: 7px;
}
.vue-rigth-page-pages li.prevDisabled a,
.vue-rigth-page-pages li.nextDisabled a {
  color: #ccc;
}
.vue-rigth-page-pages li.prevDisabled:hover,
.vue-rigth-page-pages,
.nextDisabled:hover {
  border-color: #e6ecef;
}
.vue-rigth-page-pages li.prevDisabled:hover a,
.vue-rigth-page-pages li.nextDisabled:hover a {
  color: #ccc;
}
.vue-rigth-page-pages li:hover {
  background-color: #03a9f4;
  border-color: #03a9f4;
}
.vue-rigth-page-pages li.more:hover {
  background-color: #fff;
  border: none;
}
.vue-rigth-page-pages li:hover a {
  color: #fff;
}
.vue-rigth-page-pages li.more {
  padding: 0;
  border: none;
  line-height: 22px;
}
.num_total {
  float: right;
  height: 100%;
  line-height: 22px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.num_total > span {
  color: #fc5b27;
}
.select-content {
  z-index: 11;
  position: fixed;
  width: 100px;
  border: 1px solid #f1f1f1;
  top: 175px;
  background: #fff;
  text-align: left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.select-content-in {
  height: 148px;
  overflow: auto;
}
.select-content-in ul {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}
.select-content-in ul li {
  padding: 0 20px;
  height: 34px;
  line-height: 34px;
  position: relative;
  font-size: 14px;
  cursor: pointer;
  color: #409eff;
}
.select-content-in-area {
  color: #606266;
}
.select-content-in-area-active1 {
  background: #e0e0e0;
  color: #409eff;
}
.select-content-in-area-active {
  background: #e0e0e0;
  color: #409eff;
}
.select-input {
  display: inline-block;
  width: 100px;
}

.table-commu th {
  height: 47px;
}
.commus-clumn {
  width: 80px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style lang="scss"  >

.el-date-editor--time-select{
  width: 150px !important;
}
// 穿透不生效
// .el-time-panel
//   .el-time-panel__content:first-of-type
//   .el-time-spinner
//   .el-time-spinner__wrapper:nth-of-type(1) {
//   display: inline;
//   text-align: left;
// }
// .el-time-panel
//   .el-time-panel__content:first-of-type
//   .el-time-spinner
//   .el-time-spinner__wrapper:nth-of-type(2) {
//   display: none !important;
// }
// .el-time-spinner__wrapper:nth-of-type(3) {
//   display: none !important;
// }
</style>
